<template>
  <view>
    <nav-bar title="服务详情"></nav-bar>
    <view class="content">
      <view class="content-state">
        <view class="state-left">
          <view class="left-top">
          <image class="left-img" :src="orderInfo.img || baseIconUrl + '/userIcon/icon_order_await.png'" mode="aspectFill"/>
          <text class="label" :style="{ color: statusConfig[orderInfo.status].color }">
          {{ statusConfig[orderInfo.status].text }}
          </text>
          </view>
          <view class="left-word">{{ orderInfo.word }}</view>
          <view class="check-detail">查看全部进度</view>
        </view>
        <view class="state-right">
          <image class="right-img" :src="baseIconUrl + '/userIcon/icon_order_logo.png'" mode="aspectFill"/>
          </view>
      </view>
      <view class="service-detail">
      <view class="service-title">服务详情</view>
      <view class="equipment">
       <view class="top">
        <view class="top-left">
          <image class="top-img" :src="orderInfo.image || baseImgUrl + '/userImg/img_service_big_bg.png'" mode="aspectFill"/>
        </view>
        <view class="top-right">
          <view class="title">{{ orderInfo.title }}</view>
          <view class="number">
            <view>有效期:{{ Number(orderInfo.number) }}个月</view>
            <view class="frequency">×{{ orderInfo.frequency }}</view>
          </view>
        </view>
       </view>
       <view class="equipment-detail">
        <view class="box-detail">
          <text class="detail-title">订单金额</text>
          <text>￥{{ Number(orderInfo.money) }}</text>
        </view>
        <view class="box-detail">
          <text class="detail-title">服务天数</text>
          <text>{{ orderInfo.time }}个月(180天)</text>
        </view>
        <view class="box-detail">
          <text class="detail-title">总计</text>
          <text class="total">￥{{ Number(orderInfo.money) + 10 }}</text>
        </view>
       </view>
      </view>
    </view>
    <view class="order-detail">
       <view class="order-title">订单详情</view>
       <view class="equipment-detail">
        <view class="box-detail">
        <text class="detail-title">订单号</text>
          <text>{{ orderInfo.orderNumber }}</text>
       </view>
       <view class="box-detail">
        <text class="detail-title">创建时间</text>
          <text>{{ orderInfo.createTime }}</text>
       </view>
       <view class="box-detail">
        <text class="detail-title">支付方式</text>
          <text>{{ orderInfo.mode }}</text>
       </view>
       <view class="box-detail">
        <text class="detail-title">订单备注</text>
          <text>{{ orderInfo.remark }}</text>
       </view>
       </view>
      </view>
      <view class="form_bottom_btn">
        <view class="btn-box">
        <view class="confirm" v-if="orderInfo.status == '0'" @click="clickCancel">取消预约</view>
        <view class="confirm" v-if="orderInfo.status == '1' || orderInfo.status == '2'" @click="clickDetail">查看训练计划</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import { baseImgUrl, baseIconUrl } from '@/config'
  export default {
    name: 'VipServiceDetail',
    data() {
      return {
        baseImgUrl,
        baseIconUrl,
        orderInfo: {},
        serviceStatus: '',
        statusConfig: {
          '0': { text: '待分配', color: '#115BAA' },
          '1': { text: '训练中', color: '#115BAA' },
          '2': { text: '已完成', color: '#115BAA' },
        }
      }
    },
    onLoad(options) {
      this.serviceStatus = options.title || ''
      this.getServiceDetail()
    },
    methods: {
      //取消预约
      clickCancel(){
        uni.navigateBack({
          delta:1
        })
      },
      //查看训练计划
      clickDetail() {
        uni.navigateTo({
          url: "/subPages/userMine/myPlan/myPlanList",
        })
      },
      getServiceDetail() {
        this.orderInfo = {
          status: this.serviceStatus,
          word: '预约订单已提交，正在等待平台推荐医师',
          title: '康复咨询VIP定制服务',
          number: '6',
          frequency: '1',
          money: '188',
          time: '6',
          orderNumber: '20132565223131',
          mode: '微信支付',
          createTime: '2024-02-25 13:26:09',
          remark: '无'
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .content {
    .content-state {
      width: 690rpx;
      margin: 0 auto;
      margin-top: 30rpx;
      padding: 30rpx;
      background: #fff;
      border-radius: 16rpx;
      display: flex;
      .state-left{
        .left-top{
          display: flex;
          align-items: center;
          .left-img{
            width: 40rpx;
            height: 40rpx;
          }
          .label{
            font-weight: 600;
            font-size: 36rpx;
            margin-left: 20rpx;
          }
        }
        .left-word{
          font-size: 24rpx;
          color:#999;
          margin-top: 20rpx;
        }
        .check-detail{
          width: 192rpx;
          height: 60rpx;
          border-radius:30rpx;
          background:#e7eff7;
          color: #115BAA;
          text-align: center;
          line-height: 60rpx;
          margin-top: 30rpx;
        }
      }
      .state-right{
        margin-left: 52rpx;
        .right-img{
          width: 176rpx;
          height: 176rpx;
        }
      }
    }
    .service-title{
      font-size: 32rpx;
      font-weight: 600;
      color: #000;
    }
    .service-detail{
        width: 690rpx;
        border-radius: 16rpx;
        background: #FFFFFF;
        padding: 30rpx 0 30rpx 30rpx;
        margin-top: 30rpx;
        margin: 0 auto;
      .equipment{
        border-radius: 16rpx;
        background: #FFFFFF;
        padding: 30rpx;
        margin-top: 30rpx;
        .top{
          display: flex;
          .top-left{
            .top-img{
              width: 120rpx;
              height: 80rpx;
              border-radius: 8rpx;
            }
          }
          .top-right{
            margin-left: 28rpx;
          .title{
            width: 352rpx;
            font-size: 32rpx;
            color: #333;
            font-weight: 600;
          }
          .number{
            width: 448rpx;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 24rpx;
            color: #999;
            margin-top: 20rpx;
          }
          }
        }
      }
      .equipment-detail{
          display: flex;
          flex-direction: column;
          font-size: 28rpx;
          color: #333;
          .detail-title{
            color:#999;
          }
          .box-detail{
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 15rpx;
          }
          .total{
            color: #FF513A;
          }
        }
    }
    .order-detail{
      width: 690rpx;
      border-radius: 16rpx;
      background: #FFFFFF;
      margin: 0 auto;
      padding: 30rpx;
      margin-top: 30rpx;
      font-size: 28rpx;
      color: #333;
      .order-title{
        font-size: 32rpx;
        color: #333;
        font-weight: 600;
      }
      .order-box{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15rpx;
      }
      .box-detail{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 15rpx;
        }
      .detail-title{
        color:#999;
      }
    }
  }
</style>
